<template>
	<view class="">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <z-nav-bar id="nav" bgColor="#ffffff" title="我的收藏"></z-nav-bar>
      </template>
      <public-loading></public-loading>

      <view class="shop-box" >

        <view class="shop-item flex-a-center" v-for="(item,index) in dataList" :key="index"  >
          <view v-if="isEditing" class="single-select-vessel" @click.stop="onSelect(index)">
            <single-select :selectShow="listSelect.indexOf(index)!=-1" :borderColor="'#999'" :bgColor="'#0080FF'"></single-select>
          </view>

          <view class="flex" hover-class="none" @click.native="!isEditing && goShopCooperation(item.id, item.storeId)">
            <image class="shopImg" :src="item.images" mode=""></image>
            <view class="refer" style="position: relative">
              <view class="refer-item1 flex-center-between ">
                <text class="text-ellipsis ellip1">{{item.storeShortName}}</text>
                <image class="post" @click="handelClose(item)" v-if="!isEditing" src="http://www.xvopen.com/xiaoV/img1/heart-full.png" mode=""></image>
              </view>
              <view class="refer-item2 flex-center-between">
                <text class="text-ellipsis text-ellipsis2 ellip2" style="font-size: 24rpx">店铺简介：{{item.description}}</text>
              </view>
              <view class="refer-item3">
                <star :starRate="item.rating"></star>
<!--                <view class="distance flex-a-center">-->
<!--                  <image class="add" src="http://www.xvopen.com/xiaoV/img1/add.png" mode=""></image>-->
<!--                  {{item.distance}}km-->
<!--                </view>-->
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="bottom-btn-box">
        <view v-if="isEditing" class="isEditing flex-a-center">
          <view @tap="selectAllcollect">
            <single-select :selectShow="selectAll" :borderColor="'#999'" :bgColor="'#0080FF'"></single-select>
          </view>
          <view class="all">
            全选
          </view>
          <main-button :width="'240rpx'" :color="'#000'" :borderColor="'#222'" :margin="'0 0 0 68rpx'" :bgColor="'#fff'" :isGradient="false" @click="isEditing=!isEditing">取消</main-button>
          <main-button :width="'240rpx'" :color="'#fff'" :borderColor="'#444'"  :margin="'0 0 0 16rpx'" :bgColor="'#444'" :isGradient="false"  @click="collectCancel">取消收藏</main-button>
        </view>
        <block v-else>
          <main-button :color="'#fff'" :margin="'24rpx 0 0'" @click="isEditing=!isEditing">编辑</main-button>
        </block>
      </view>

      <!-- 提示蒙版层 -->
      <hint v-model:modelValue="isHint" :content="'是否确认取消收藏'" @confirm="hintConfirm" :title="'提示'"></hint>
    </z-paging>


	</view>
</template>

<script setup>
import {onShow, onLoad } from '@dcloudio/uni-app';
import {storeDetailsId} from '@/api/pagesShop/index'
// import { useCollectionStoreList } from '@/api/user';
import {onMounted,ref} from "vue";
import { commonStore } from '@/stores/common'
import {useCustomStores} from '@/utils/hook'
import {storeGetMyCollectStore,customerCancelShop} from '../../api/pagesMy/user'
// 新增导入取消收藏接口
// import { customerCancelShop } from '../../api/pagesMy/user'
const CommonStore =commonStore()
const {ShopStore} = useCustomStores()
//-----------------------------------data----------------------------
	// 门店
	let	shopList = ref([])
  const paging = ref(null)
  const dataList = ref([])
	let isEditing = ref(false) //是否是编辑状态
	let selectAll = ref(false) //是否是全选
	let listSelect = ref([])
	let isHint = ref(false) //是否展示提示框
  let info =ref({})
//---------------------------------------onload----------------------
  const queryList = (pageNo, pageSize) => {
    storeGetMyCollectStore({
      pageNum:pageNo,
      pageSize:pageSize,
      latitude: CommonStore.cityInfo.latitude||null,
      longitude: CommonStore.cityInfo.longitude || null,
    }).then(res=>{
      paging.value.complete(res)
      // 新增：每次加载后重置全选和多选
      selectAll.value = false
      listSelect.value = []
    })
  }
  const handelClose =(item)=>{
    info.value = item
    isHint.value = true
  }
	onLoad((e)=>{
		// getUseCollectionStoreList();
	})


	onShow((e)=>{
		// getUseCollectionStoreList();
	})


//-----------------------------------function------------------------
	// 多选
	function onSelect(index) {
		if(listSelect.value.indexOf(index)==-1){
			listSelect.value.push(index)
		}else{
			listSelect.value.splice(listSelect.value.indexOf(index),1)
		}
		// 新增：判断是否全选
		if(listSelect.value.length === dataList.value.length && dataList.value.length > 0){
			selectAll.value = true
		}else{
			selectAll.value = false
		}
	}
	// 全选
	function selectAllcollect(){
		if(!selectAll.value){
			// 全选
			listSelect.value = dataList.value.map((item, idx) => idx)
			selectAll.value = true
		}else{
			// 取消全选
			listSelect.value = []
			selectAll.value = false
		}
	}
	// 取消收藏
	function collectCancel(){
		if(listSelect.value.length > 0){
			// 多选时弹窗
			isHint.value = true
			// info.value 不需要赋值
		}else if(info.value && info.value.storeId){
			// 单选时弹窗
			isHint.value = true
		}
	}
	// 确认取消
	function hintConfirm(){
		let storeIds = []
		if(listSelect.value.length > 0){
			// 多选
			storeIds = listSelect.value.map(idx => dataList.value[idx].storeId)
		}else if(info.value && info.value.storeId){
			// 单选
			storeIds = [info.value.storeId]
		}
		if(storeIds.length === 0) {
			isHint.value = false
			return
		}
		customerCancelShop({
			storeIds: storeIds
		}).then(res=>{
			isHint.value = false
			paging.value.reload()
		})
	}


	function getUseCollectionStoreList(){
		const data = {
		  longitude:123,
		  latitude:456
		}
	}
const goShopCooperation = (id,ids) =>{

  setTimeout(()=>{
    if(isHint.value){
      return
    }
    storeDetailsId(id).then(res=>{
      ShopStore.setShopInfo({
        ...res,
      })
      uni.navigateTo({
        url: '/pages/cleaningOrder/index?storeId='+ids
      })
    })
  },100)

}

</script>

<style>
	page{background-color: #fff;}
</style>
<style lang="scss">
	@import "../style/common.scss";
	.shop-box{
		padding-bottom: 300rpx;
	}
	.isEditing{
		margin-top: 24rpx;
		.all{
			margin-left: 16rpx;
			font-size: 32rpx;
		}
	}
	.single-select-vessel{
		margin-left: 8rpx;
		margin-right: 10rpx;
	}
  .post{
    position: absolute;
    right: 30rpx;
    top:50%;
    transform: translateY(-50%);
  }
</style>
